import React from 'react'
import App, {Container} from 'next/app'
import Head from 'next/head'
import Headers from './components/header'
import { Provider } from 'react-redux'
import withRedux from 'next-redux-wrapper'
import withReduxSaga from 'next-redux-saga'

import createStore from './store'
import '../static/style/index.less'
import '../static/style/essay.less'
class Layout extends React.Component {
  render () {
    const {children} = this.props
    return <div className='layout'>
            {children}
          </div>
  }
}

class MyApp extends App {
  static async getInitialProps ({ Component, ctx }) {
    let pageProps = {}

    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps({ ctx })
    }

    return { pageProps }
  }
  constructor(props){
     super(props)
  }
  render () {
    const { Component, pageProps, store } = this.props
    return (
        <Container>
            <Head>
			        <link rel='stylesheet' href='https://unpkg.com/antd@3.14.1/dist/antd.css'/>
              <link rel='stylesheet' href='../static/icon/iconfont.css'/>
              <script src="../static/icon/iconfont.js"></script>
			      </Head>
            <Provider store={store}>
              <Layout>
                  <Headers/>
                  <div className="mainContent">
                      <Component {...pageProps} />
                  </div>
              </Layout>
            </Provider>
        </Container>
        )
  }
}

export default withRedux(createStore)(withReduxSaga(MyApp))
